<template>
	<view class="center-box">
		


		<u-navbar back-icon-name="arrow-left" title-size="36" back-text="" :back-icon-size="50" title="举报" :title-bold="true">
			<view class="navbar-right" slot="right">
				<view
					class="message-box right-item"
					@click="l.to('/pages/home/knowledge')"
					style="padding-right: 32rpx; color: #666666;">
					举报须知
				</view>
			</view>
		</u-navbar>


		<view class="heaer-box">

			<view class="titl-cen f22 lh42">
				举报信息均会经过审核人员的核对处理，恶意举报不会生效，请大 家善意利用举报功能！对同一个违规用户仅举报一次就够了喔~
			</view>


			<view class="title-text">
				<view class="mb30">
					请选择举报原因
				</view>
				<view class="pl29">
					<u-tag text="低俗色情" v-for="(item1,index) in 10" :key="index" bg-color="#fff" style="margin: 0 30rpx 30rpx 0;
						padding: 18rpx 33rpx;"
					 color="#000" shape="circle" type="info" />
				</view>


				<view class="mt19 f24 " style="color: #666;">
					<i class="cuIcon-title mr21 f36" style="color: #000000;"></i>
					<text>为帮助审核人员尽快处理，可补充详细的举报说明</text>
					<view class="pl30 pr30 pt30 pb30">
						 <textarea placeholder-style="color:#999999" maxlength="200" placeholder="请填写详细说明"/>
					</view>
				</view>
			</view>
			<view class="mt30 r10 ww100 center-textarea">
				<textarea @input="inputCenter" maxlength="200" placeholder="请填写详细说明" auto-height />
				</view>
			<view class="flex justify-between align-center mt26">
				<view class="">

				</view>
				<view class="f24" style="color: #666666;">
					{{leng}}/200
				</view>
			</view>

			<view class="mt49 f24 flex align-center" style="color: #666;">
				<i class="cuIcon-title mr21 f36" style="color: #000000;"></i>
				<text>涉及微信QQ等平台取证，请上传图片（最多4张）</text>
			</view>
			<view class="pt30" @click="chooseImages">
				<u-upload upload-text=" " width="120" height="120" :action="action" max-count="4"></u-upload>
			</view>
			
			<view class="add-btn">
				<button type="default" class="btn-submit">提交确认</button>
			</view>
		</view>


		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leng: 0,
				action: 'http://www.example.com/upload',
				fileList: [{
					url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				}]
			};
		},
		onShow() {},
		onLoad(e) {},
		methods: {
			clkOn() {
				this.z.load(this);
				setTimeout(() => {
					this.z.load(this, 0);
				}, 3000);
			},

			inputCenter(e) {
				this.leng = e.detail.value.length
				console.log('e==>', e);
			},
			
			chooseImages() {
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
				        console.log(JSON.stringify(res.tempFilePaths));
				    }
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.center-box {
		width: 100%;

		.heaer-box {
			width: 100%;
			padding: 30rpx;

			.titl-cen {
				width: 100%;
				color: #808080;
				padding: 25rpx 22rpx;
				border-radius: 10rpx;
				background-color: #F5F5F5;
			}

			.title-text {
				padding: 40rpx 30rpx 0rpx 0;

				.u-tag {
					margin-right: 0;
				}
			}

			.center-textarea {
				width: 100%;
				height: 365rpx;
				border-radius: 10rpx;
				background-color: #FAFAFA;

				textarea {
					width: 100%;
					height: 365rpx;
					padding: 30rpx;
					font-size: 28rpx;
					background-color: #FAFAFA;
				}
			}
			
			/deep/.uni-text[data-v-7e683b30] {
				font-size: 40rpx !important;
			}
			
			.add-btn {
				width: 100%;
				height: 80rpx;
				display: flex;
				margin-top: 143rpx;
				justify-content: center;
				
				.btn-submit {
					width: 500rpx;
					height: 80rpx;
					color: #FFFFFF;
					font-size: 30rpx;
					background-color: #000000;
					border-radius: 40rpx;
				}
			}
		}
	}
</style>
